<template>
	<view class="login-container">
		<form @submit="bindSave">
			<view class="form">
				<view class="input">
					<view>账号：</view>
					<input
						name="account"
						type="text"
						placeholder="请输入手机号"
						placeholder-class="placeholder"
						:value="userInfo.account"
					/>
				</view>
				<view class="input">
					<view>密码：</view>
					<input
						name="password"
						type="password"
						placeholder="请输入密码"
						placeholder-class="placeholder"
						:value="userInfo.password"
					/>
				</view>
			</view>
			<button class="submit-btn" form-type="submit">登录</button>
		</form>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { createToastComp } from "../../utils/comp";
import { login_user } from "../../service";

const userInfo = ref({
	account: "",
	password: "",
});

const bindSave = (e: any) => {
	const user = e.detail.value;
	if (!user.account || !user.password) {
		return createToastComp({ title: "请输入账号和密码" }, "none");
	}
	const _user = Object.assign({ token: uni.getStorageSync('token'), utid: uni.getStorageSync('utid') }, user);
	login_user(_user).then((res: any) => {
		// 登录成功，返回上一页
		if (res.status === "success") {
			createToastComp({ title: res.msg || "登录成功" }, "success");
			uni.navigateBack({
				delta: 1
			});
		} else {
			createToastComp({ title: res.msg || "登录失败" }, "error");
		}
	});
}
</script>

<style lang="less" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background-color: #fafafa;
  overflow: hidden;
}

.form {
  padding: 60rpx 50rpx 40rpx;
  color: #585858;
  line-height: 90rpx;
  font-size: 14px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}
.form .input {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.form .input input {
  padding: 0 10rpx;
}
.submit-btn {
  margin: 40rpx 100rpx;
  height: 100rpx;
  background-color: #f53434;
  border-radius: 50rpx;
  line-height: 100rpx;
  text-align: center;
  color: #ffffff;
  letter-spacing: 20rpx;
  font-size: 17px;
}
</style>
